<template>
  <div class="goosinfo-container">
    <!-- 轮播图 -->
    <transition
      @beforeEnter="beforeEnter"
      @enter="enter"
      @afterEnter="afterEnter"
    >
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotu="lunbotu" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">{{goodsMsg.title}}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：
            <del>￥{{goodsMsg.market_price}}</del>&nbsp;&nbsp;销售价：
            <span class="now_price">￥{{goodsMsg.sell_price}}</span>
          </p>
          <p>购买数量：
            <numbox @getNumCount="getNumCount" :max="goodsMsg.stock_quantity"></numbox>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" @click="addShopcart">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品详情 -->
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{goodsMsg.goods_no}}</p>
          <p>储存情况：{{goodsMsg.stock_quantity}}</p>
          <p>上架时间：{{goodsMsg.add_time | dateFormat}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="getDesc(id)">商品详情</mt-button>
        <mt-button type="danger" size="large" plain @click="getComment(id)">商品评论</mt-button>
      </div>
    </div>

  </div>
</template>
<script>
import swiper from '../../component/swiper'
import numbox from '../../component/num_box'
export default {
  data () {
    return {
      id: this.$route.params.id,
      lunbotu: [],
      goodsMsg: {},
      ballFlag: false,
      numCount: 1
    }
  },
  created () {
    this.getLunbotuList()
    this.getGoodsMsg()
  },
  methods: {
    getLunbotuList () {
      this.axios.get(`http://www.lovegf.cn:8899/api/getthumimages/${this.id}`).then(res => {
        if (res.status === 200) {
          res.data.message.forEach(item => {
            item.url = item.src
            item.img = item.src
          })
          this.lunbotu = res.data.message
        }
      })
    },
    // 获取商品参数信息
    getGoodsMsg () {
      this.axios.get(`http://www.lovegf.cn:8899/api/goods/getinfo/${this.id}`).then(res => {
        if (res.status === 200) {
          this.goodsMsg = res.data.message[0]
        }
      })
    },
    getDesc (id) {
      this.$router.push({name: 'GoodsDesc'})
    },
    getComment (id) {
      this.$router.push({name: 'GoodsComment'})
    },
    // 加入购物车
    addShopcart () {
      this.ballFlag = !this.ballFlag

      let goodsinfo = {
        id: this.id,
        count: this.numCount,
        sell_price: this.goodsMsg.sell_price,
        selected: true
      }
      this.$store.commit('addCart', goodsinfo)
    },
    beforeEnter (el) {
      el.style.transform = 'translate(0, 0)'
    },
    enter (el, done) {
      // el.offsetWidth

      // 获取小球的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect()
      // 获取徽标位置
      const badgePosition = document.getElementById('badge').getBoundingClientRect()
      let xPosition = badgePosition.left - ballPosition.left
      let yPosition = badgePosition.top - ballPosition.top
      el.style.transform = `translate(${xPosition}px, ${yPosition}px)`
      el.style.transition = 'all .5s cubic-bezier(.17,.67,.83,.67)'
      done()
    },
    afterEnter (el) {
      this.ballFlag = !this.ballFlag
    },
    getNumCount (count) {
      this.numCount = count
      console.log(this.numCount)
    }
  },
  components: {
    swiper,
    numbox
  }
}
</script>
<style lang="scss" scoped>
.goosinfo-container {
  background-color: #eee;
  overflow: hidden;
  .ball {
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    top: 407px;
    left: 150px;
  }
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
}
</style>
